<template>
  <div class="nav_outer">
    <header id="header" class="yui-bar">
        <div>资讯</div>
    </header>
    <div class="collecttabs_wrap" v-scroll>
      <div class="collectabs">
        <div v-bind:class="{ tab:true,on:statu==0 }" @click="switchtab(0)" data-index=0>
          <span>最新动态</span>
        </div>
        <div v-bind:class="{ tab:true,on:statu==1 }" @click="switchtab(1)" data-index=1>
          <span>打工攻略</span>
        </div>
        <div v-bind:class="{ tab:true,on:statu==2 }" @click="switchtab(2)" data-index=2>
          <span>身在职场</span>
        </div>
        <div v-bind:class="{ tab:true,on:statu==3 }" @click="switchtab(3)" data-index=3>
          <span>生活百态</span>
        </div>
        <div v-bind:class="{ tab:true,on:statu==4 }" @click="switchtab(4)" data-index=4>
          <span>新闻动态</span>
        </div>
      </div>
    </div>
    
    <div class="locations">
      <div class="location" v-for="item in infolists" v-bind:key="item.id"  @click="navito('infodetail?id='+item.id)">
        <div class="img_wrap" :style="'background-image:url('+ prefix + item.thumbNail+')'">
          <!-- <img :src="item.thumbNail" alt=""> -->
        </div>
        <div class="location_info">
          <div class="title" v-html="item.title"></div>
          <div class="flex_bet">
              <div class="viewnum">
                  <img src="../assets/img/yanjing@2x.png" alt="">
                  {{item.viewCount || 2689}}
               </div>
              <div class="time">{{item.createDate}}</div>
          </div>
        </div>
      </div>
      <div class="refresh"></div>
    </div>
    <div class="palceholder"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      statu: 0,
      pageNum: 1,
      pageSize: 10,
      infolists:[],
      totalPage:1,
      loading: false,
      prefix: ''
    }
  },
  mounted() {
      let mui = this.mui,that = this;
      this.interactive.reachBottomLoad({
      callback: function(){
        if(that.loading){
            return;
        }
        that.pageNum+=1;
        that.loadinfos();
      }})
  },
  created(){
    this.prefix=this.Http.imgpre;
    this.loadinfos();
  },
  methods: {
    navito(url){
      this.$router.push({path:url}); 
    },
    loadinfos(){
      let that = this;
      if (this.pageNum > this.totalPage || this.loading) {
        return;
      }
      that.loading = true;
      that.Http2.get("/mobile/article/page", {
        current: that.pageNum,
        size: that.pageSize,
        type: that.statu || ''
      }).then(
        res => {
          if(that.pageNum==1){
            that.infolists = res.object;
          }else{
            that.infolists = that.infolists.concat(res.object);
          }
          that.totalPage = res.totalPage || 1;
          that.loading = false;
        },
        () => {
          that.loading = false;
        }
      );
    },
    switchtab(type){
      this.pageNum = 1;
      this.statu = type;
      this.loadinfos();
    }
  },
  directives: {
    scroll:{
      bind(el, binding, vnode){
        $(el).on('click','.tab',function(){
            var index = $(this).data('index');
            var ofleft = $('.tab').eq(index)[0].offsetLeft;
            var winw = $(window).width();
            let twidth = $(".collectabs").width();
            let scrollEle = $(el);
            if(ofleft<winw/2){
                scrollEle[0].scrollLeft=0;
            }else if(ofleft>(twidth-winw/2)){
                scrollEle.scrollLeft(twidth-winw);
            }else{
                scrollEle.scrollLeft(parseInt(ofleft-winw/2));
            }
        });
      }
    }
  }
}
</script>

<style lang='scss' scoped>
  @function px2em($px) {
    @if (unitless($px)) {
      @return px2em($px + 0px);
    } @else if (unit($px) == em) {
      @return $px;
    }
    @return ($px / 75px) * 1rem;
  }
  .collecttabs_wrap{
    width: 100%;
    overflow: auto;
  }
  .collectabs{
      display: flex;
      width: px2em(1100);
      align-items: center;
      justify-content: center;
      margin-top: 3px;
      .tab{
        flex: 1;
        text-align: center;
        height: px2em(70);
        line-height: px2em(70);
        background: #fff;
        >span{
          display: inline-block;
          height: 100%;
        }
        &.on>span{
          border-top: 3px solid #4689E9;
          position: relative;
          top: -3px;
        }
      }
    }
  .location{
    padding: px2em(30);
    display: flex;
    background: #fff;
    align-items: center;
    margin: 2px 0;
    &:first-child{
      margin-top: 0;
    }
    .img_wrap{
      width: px2em(240);
      height: px2em(200);
      background: #5ED3FF;
      background-size: cover;
      background-position: center center;
      margin-right: px2em(50);
      overflow: hidden;
      >img{
          width: 100%;
      }
    }
    .location_info{
      flex: 1;
      position: relative;
      .flex_bet{
          color: #999;
          font-size: 0.8em;
      }
      .title{
          margin-bottom: px2em(80);
          color: #333;
      }
      .viewnum{
          >img{
              width: 1.5em;
              vertical-align: middle;
              margin-top:-2px;
          }
      }
    }
  }
</style>